<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--css-->
    <link rel="stylesheet" href="plugins/elementui/index.css">
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
</head>
<body>
<div id="app">

    <!--顶部搜索框-->
    <el-form :inline="true" :model="formData" class="demo-form-inline">
        <el-form-item label="姓名">
            <el-input v-model="formData.username" placeholder="请输入姓名..."></el-input>
        </el-form-item>
        <el-form-item label="性别">
            <el-select v-model="formData.sex" placeholder="请选择性别">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="0"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>

    <!--批量删除 新增按钮-->
    <el-button type="danger" icon="el-icon-delete" @click="deleteBatch()">批量删除</el-button>
    <el-button type="success" icon="el-icon-circle-plus-outline" @click="addInfo()">新增信息</el-button>

    <!--弹出框-->
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
        <el-form :model="student">
            <el-form-item label="学生姓名" label-width="120">
                <el-input v-model="student.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="学生性别" label-width="120">
                <el-select v-model="student.sex" placeholder="请选择性别">
                    <el-option label="男" value="1"></el-option>
                    <el-option label="女" value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="学生年龄" label-width="120">
                <el-input v-model="student.age" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="学生地址" label-width="120">
                <el-input v-model="student.address" autocomplete="off"></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
    </el-dialog>


    <!--表格-->
    <el-table
            :data="tableData"
            style="width: 100%"
            :row-class-name="tableRowClassName"
            @selection-change="handleSelectionChange">
        <!--复选框-->
        <el-table-column
                type="selection"
                width="55"
        align="center">
        </el-table-column>

        <el-table-column
                prop="id"
                label="编号"
                width="120">
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
                width="120">
        </el-table-column>
        <el-table-column
                prop="age"
                label="年龄"
                width="120">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址">
        </el-table-column>
        <el-table-column
                prop="status"
                label="状态">
        </el-table-column>

        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.row)">编辑</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!--分页组件-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="100">
    </el-pagination>

</div>

</body>
<!--js-->
<script src="js/vue.js"></script>
<script src="plugins/elementui/index.js"></script>
<script>
    new Vue({
        el:'#app',
        data(){
            return{
                /*搜索框数据*/
                formData: {
                    username: '',
                    sex: ''
                },
                /*表格数据*/
                tableData: [{
                    id: '001',
                    name: '王小虎',
                    age:18,
                    address: '上海市普陀区金沙江路 1518 弄',
                },
                    {
                        id: '001',
                        name: '王小虎',
                        age:18,
                        address: '上海市普陀区金沙江路 1518 弄',
                    }
                ],
                //选择删除谁 最后会被加在数组中
                multipleSelection: [],
                currentPage: 1,
                /*控制弹出框*/
                dialogFormVisible: false,
                student:{
                    name:''
                }
            }
        },
        methods:{
            /*表格颜色的方法*/
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            onSubmit() {
                console.log('submit!');
            },
            /*编辑和删除*/
            handleEdit(row) {
                console.log(row.id);
                this.dialogFormVisible=true;
                this.student=row;

            },
            handleDelete(row) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

                console.log(row);
            },
            /*处理复选框*/
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(this.multipleSelection)
            },
            /*分页相关内容*/
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
            /*批量删除按钮*/
            deleteBatch(){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //新增
            addInfo(){
                this.dialogFormVisible=true;
                this.student={}
            }

        }

    });
</script>


</html>